<!DOCTYPE html>
<html lang="zh">

<head>
	<title>3D中国地图3</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<script src="./js/jquery-1.7.1.js"></script>
	<script src="./js/echarts.min.js"></script>
	<script src="./js/echarts-gl.min.js"></script>
	<style type="text/css">
		#main,
		body,
		html {
			width: 100%;
			height: 100%;
		}
	</style>
</head>

<body>
	<!-- 3D地图容器 -->
	<div id="chinaMap" style="width: 100%; height: 800px;"></div>
	<script>
		$.get('./js/china.json', function (chinaJson) {
			echarts.registerMap('china', chinaJson);
			var chart = echarts.init(document.getElementById('chinaMap'));
			let geoCoordMap = {
				'上海': [121.467892, 31.238399],
				'广州': [113.26223, 23.134273],
				'深圳': [114.064552, 22.549524],
			};

			// 后台获取城市数据
			let data = [{
				name: "上海",
			}, {
				name: "广州",
			}, {
				name: "深圳",
			}, ]

			var convertData = function (data) {
				var res = [];
				for (var i = 0; i < data.length; i++) {
					var geoCoord = geoCoordMap[data[i].name];
					if (geoCoord) {
						res.push({
							name: data[i].name,
							value: geoCoord.concat(10)
						});
					}
				}
				console.log(res)
				return res;
			};

			option = {
				// 绘制3d地图
				geo3D: {
					map: 'china',
					viewControl: {
						distance: 75, //地图视角 控制初始大小
						rotateSensitivity: 1, //禁止旋转
						zoomSensitivity: 1, //禁止缩放
					},
					//地图上每个省的颜色配置
					itemStyle: {
						areaColor: 'rgba(255,255,255,1)',
						opacity: 1, // 透明度
						color: '#8b8b8b', //地图颜色
						borderWidth: 0.5, //分界线宽度  
						borderColor: '#4c4c4c' //分界线颜色  
					},
					light: { //光照阴影
						main: {
							color: '#fff', //光照颜色
							intensity: 1.2, //光照强度
							//shadowQuality: 'high', //阴影亮度
							shadow: false, //是否显示阴影
							alpha: 55,
							beta: 10

						},
						ambient: {
							intensity: 0.3
						}
					}
				},
				series: [
					// 散点
					// {
					// 	type: 'scatter3D', //3D类型
					// 	name: '测试', //名字
					// 	coordinateSystem: 'geo3D', //使用地球三维地理坐标系
					// 	symbol: 'circle', //点形状 
					// 	symbolSize: 10, //点大小
					// 	color: "#fcba1a",
					// 	data: convertData(data),
					// },
					// 柱子
					{
						name: 'bar3D',
						type: "bar3D",
						coordinateSystem: 'geo3D',
						barSize: 0.2, //柱子粗细
						color: '#fcba1a',
						shading: 'lambert',
						opacity: 1,
						bevelSize: 0.3,
						// 柱子标题
						label: {
							show: true,
							formatter: '{b}',
							distance: 0,
							textStyle: {
								color: '#000',
								backgroundColor: '#fcba1a',
							}
						},
						data: convertData(data),
					},


				]
			}
			chart.setOption(option);
		});
	</script>
</body>


</html>